<template>
  <div class="box">
    <p class="boxTemperature">{{ weatcherData.tem }}°C</p>
    <p class="boxWeather">{{ weatcherData.wea }}</p>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      weatcherData: {},
    };
  },
  methods: {
    getWeather() {
      axios
        .get("https://v0.yiketianqi.com/api", {
          params: {
            unescape: "1",
            appid: "97995816",
            appsecret: "hxhTmpL5",
            version: "v9",
          },
        })
        .then((res) => {
          if (res.data) {
            this.weatcherData = res.data;
            this.weatcherData.tem = res.data.data[0].tem;
            this.weatcherData.wea = res.data.data[0].wea;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getWeather();
    this.timer = setInterval(() => {
      this.getWeather();
    }, 1000 * 60 * 60);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

<style scoped>
.box {
  display: flex;
  align-items: center;
  color: white;
  margin-right: 20px;
  font-size: 14px;
}
.boxTemperature {
  color: rgb(4, 207, 207);
  font-weight: 400;
}
.boxWeather {
  margin: 0 0 0 15px;
}
</style>
